<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>FloatButton5 徽标数</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">徽标数</a-divider><!-- =============================================================== -->
	<p class="desc">右上角附带圆形徽标数字的悬浮按钮。</p>
	<a-float-button @click="handleClick(1)" shape="circle" :badge="{ dot: true }" :style="{ right: '164px' }"></a-float-button>
	
	<a-float-button-group shape="circle" :style="{ right: '94px' }">
		<a-float-button @click="handleClick(5)" :badge="{ count: 5, color: 'blue' }">
			<template #tooltip>
				<div>custom badge color</div>
			</template>
		</a-float-button>
		<a-float-button @click="handleClick(6)" :badge="{ count: 6 }"></a-float-button>
	</a-float-button-group>
	
	<a-float-button-group shape="circle">
		<a-float-button @click="handleClick(12)" :badge="{ count: 12 }">
			<template #icon>
				<question-circle-outlined></question-circle-outlined>
			</template>
		</a-float-button>
		<a-float-button @click="handleClick(123)" :badge="{ count: 123, overflowCount: 999 }"></a-float-button>
		<a-back-top :visibility-height="0" @click="backClick"></a-back-top>
	</a-float-button-group>
	
	
	
	
</div>
<div class="h1000"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		
	}
},
methods:{
	handleClick(val){
		console.log('click', val);
	},
	backClick(){
		console.log('回到顶部了');
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
